<!--  -->
<template>
  <div class="win-list">
    <Nav title="活动记录">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
      <template v-slot:right>
        <router-link tag="span" :to="{path:'/index/openReward'}" class="color-red">活动公告</router-link>
      </template>
    </Nav>
    <router-link :to="{name:'service',query:{shop_id:29}}" tag="span" class="service">联系客服</router-link>
    <TabCommon :tabs.sync="tabs" :tabIndex.sync="tabIndex" @tabChange="tabChange"></TabCommon>
    <div class="order-list-wrapper">
      <Scroll
        :preventDefault="true"
        :click="true"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="detailList"
        ref="myScroll"
      >
        <div>
          <div class="order-list">
            <template v-for="(item,index) in detailList">
              <div class="detail-item" :key="index">
                <!-- 待开奖 -->
                <template v-if="tabIndex==1">
                  <router-link tag="div" :to="{name:'detail', params: { id: item.activity_id }}">
                    <div class="flex justify-between">
                      <span class="title ellipsis">{{item.name}}</span>
                      <span class="issue">第{{item.issue_id}}期</span>
                    </div>
                    <div class="flex mt-15">
                      <img class="product-img" :src="item.image" alt />
                      <div class="body">
                        <!-- <div>我有{{item.numbers}}个活动号码，获奖概率{{item.rate}}%</div> -->
                        <div class="progress-wrapper">
                          <div class="progress" :style="{width:item.progress+'%'}"></div>
                        </div>
                        <div class="progress-tip">开奖进度（{{item.current}}/{{item.power}}）</div>
                        <div class="result color-gray">{{item.content}}</div>
                      </div>
                    </div>
                    <div class="clear-fix mt-8">
                      <span
                        @click.stop="$router.push({name:'myLuckyNumber',params:{key:item.key}})"
                        class="option float-r"
                      >我的号码</span>
                    </div>
                  </router-link>
                </template>
                <!-- 未中奖 -->
                <template v-else>
                  <div @click="routerChange(item)">
                    <div class="flex justify-between">
                      <span class="title ellipsis">{{item.name}}</span>
                      <span class="issue">第{{item.issue_id}}期</span>
                    </div>
                    <div class="flex mt-15">
                      <img class="product-img" :src="item.image" alt />
                      <div class="body">
                        <div class="flex justify-between">
                          <span class="color-gray" v-if="tabIndex==2">【未中奖】</span>
                          <span class="color-red" v-else>【恭喜中奖】</span>
                          <span class="color-red" @click.stop="showRule(item)">开奖规则</span>
                        </div>
                        <div class="mt-13 color-red">活动开奖结果：{{item.luck_number}}</div>
                        <!-- <div class="mt-12">我有{{item.numbers}}个活动号码，获奖概率{{item.rate}}%</div> -->
                      </div>
                    </div>
                    <div class="price-detail">
                      <div>揭晓时间：{{item.open_time}}</div>
                      <div>幸运者：{{item.luck_name}}</div>
                      <div>奖品：{{item.name}}</div>
                    </div>
                    <div class="clear-fix mt-18" v-if="tabIndex==2">
                      <span
                        @click.stop="$router.push({name:'myLuckyNumber',params:{key:item.key}})"
                        class="option float-r"
                      >我的号码</span>
                    </div>
                    <div class="clear-fix mt-18" v-else>
                      <span
                        v-if="item.is_evaluate==0"
                        @click.stop="$router.push({name:'shareWinOrder',params:{id:item.activity_id,order_id:item.agu_id,key:item.key}})"
                        class="option ml-8 float-r"
                      >分享晒单</span>
                      <!-- <router-link
                      tag="span"
                      :to="{name:'deliverDetail',params:{id:item.order_no}}"
                      class="option ml-8 float-r"
                      >查看物流</router-link>-->
                      <span
                        @click.stop="$router.push({name:'myLuckyNumber',params:{key:item.key}})"
                        class="option float-r"
                      >我的号码</span>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </div>
          <div class="loading-bottom mt-10 f-14" v-if="loading">加载中...</div>
          <div class="loading-bottom mt-10 f-14" v-if="noMore">没有更多了</div>
        </div>
      </Scroll>
    </div>
    <RuleDialog :info.sync="info" :ruleFlag.sync="ruleFlag" @close="ruleFlag=false"></RuleDialog>
  </div>
</template>

<script>
import Nav from '../../components/Nav'
import TabCommon from '../../components/OrderTab'
import Scroll from '../../components/Scroll'
import Page from '../../mixin/page'
import PriceDetail from '../../components/PriceDetail'
import { activityList } from '../../api/api'
import RuleDialog from '../../components/RuleDialog'
export default {
  mixins: [Page],
  components: { Nav, TabCommon, Scroll, PriceDetail, RuleDialog },
  data() {
    return {
      ruleFlag: false,
      tabIndex: 0,
      tabs: ['已中奖活动', '待开奖活动', '未中奖活动'],
      detailList: [],
      info: {}
    }
  },
  computed: {
    c_type() {
      switch (this.tabIndex) {
        case 0:
          return 3
        case 1:
          return 1
        case 2:
          return 2
      }
    }
  },
  watch: {},
  methods: {
    routerChange(item) {
      if (item.type == 1) {
        this.$router.push({ name: 'detail', params: { id: item.activity_id } })
      } else {
        this.$router.push({
          name: 'recordList',
          params: {
            id: item.activity_id,
            key: item.key,
            issue_id: item.issue_id
          }
        })
      }
    },
    showRule(item) {
      this.info = item
      this.ruleFlag = true
    },
    tabChange(index) {
      if (this.tabIndex != index) {
        this.tabIndex = index
        //重置
        this.current_page = 0
        this.last_page = 1
        this.loading = false
        this.detailList = []
        this._api()
      }
    },
    _api() {
      activityList({
        page: this.current_page + 1,
        type: this.c_type
      }).then(({ data: { result } }) => {
        if (result && result.length != 0) {
          this.detailList = [...this.detailList, ...result]
          this.current_page += 1
          this.last_page = this.current_page + 1
        } else {
          this.last_page = this.current_page
        }
        this.loading = false
      })
    }
  },
  created() {},
  mounted() {
    this._api()
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.win-list {
  height: 100%;
  .service {
    position: fixed;
    top: 95px;
    left: 0;
    width: 65px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
    color: #fff;
    text-align: center;
    background: rgba(234, 55, 63, 1);
    border-radius: 0 11px 11px 0;
    z-index: 99;
  }
  .order-list-wrapper {
    margin-top: 20px;
    height: calc(100% - 109px);
    overflow: hidden;
  }
  .loading-bottom {
    width: 100%;
    text-align: center;
  }
  .order-list {
    margin: 0 15px;
    .detail-item {
      margin-bottom: 8px;
      padding: 20px 8px 13px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.07);
      border-radius: 5px;
      .title {
        flex-shrink: 0;
        width: 240px;
        font-size: 11px;
        color: #9f9f9f;
        margin-right: 10px;
      }
      .issue {
        font-size: 11px;
        color: #9f9f9f;
      }
      .mt-15 {
        margin-top: 15px;
      }
      .body {
        flex: 1;
        font-size: 11px;
      }
      .product-img {
        margin-right: 9px;
        width: 65px;
        height: 65px;
        border-radius: 5px;
      }
      .progress-wrapper {
        margin-top: 11px;
        position: relative;
        height: 6px;
        background: #eee;
        border-radius: 3px;
      }
      .progress-tip {
        margin-top: 9px;
        color: #ea373f;
      }
      .result {
        margin-top: 7px;
        font-size: 10px;
      }
      .mt-13 {
        margin-top: 13px;
      }
      .color-red {
        color: #ea363e;
      }
      .progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(
          88deg,
          rgba(232, 48, 56, 1),
          rgba(247, 88, 151, 1)
        );
      }
      .option {
        width: 60px;
        height: 28px;
        color: #ea373f;
        line-height: 28px;
        text-align: center;
        font-size: 11px;
        border: 1px solid rgba(234, 55, 63, 1);
        border-radius: 5px;
      }
      .price-detail {
        margin-top: 33px;
        line-height: 18px;
        font-size: 11px;
      }
    }
  }
}
</style>